<template>
  <div class="home-box">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgList" :key="item.img">
        <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>

    <van-grid :border="true" :column-num="3">
      <van-grid-item>
        <router-link to="/newList">
          <img src="../../assets/imgs/menu1.png" />
          <span>新闻列表</span>
        </router-link>
      </van-grid-item>
      <van-grid-item to="/imgList">
        <img src="../../assets/imgs/menu2.png" />
        <span>图片列表</span>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/imgs/menu3.png" />
        <span>首页</span>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/imgs/menu4.png" />
        <span>首页</span>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/imgs/menu5.png" />
        <span>首页</span>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/imgs/menu6.png" />
        <span>首页</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      imgList: []
    }
  },
  methods: {
    async getImgList() {
      const { data: res } = await this.$http.get('/api/getlunbo')

      if(res.status == 1) return Toast.fail('请求接口失败')

      this.imgList = res.message

    }
  },
  created() {
    this.getImgList()
  }
}
</script>
<style lang="less" scoped>
  .home-box{
    .van-swipe{
      height: 200px;
      background: red;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .van-grid-item{
      img{
        width: 60px;
        height: 60px;
      }
      a{
        display: flex;
        align-items: center;
        flex-direction: column;
        span{
          color: #000;
        }
      }
    }
  }
</style>